<template>
  <div class="app-container container-width" style="padding-top:80px">
    <img style="width: 100%" src="../../../../src/assets/images/bg/bg_car.png" />
    <el-empty v-if="orderList.length<=0" ></el-empty>
    <div  v-else>
    <div>
      <div class="order-warp">
        <p flex="main:justify" 
          style="display:flex; justify-content:space-between; "
        >
          <span style="font-size:26px;margin-left:20px">我的购物车</span>
        </p>
        <div class="checkBox-warp">
          <div flex="main:left cross:center"
            style="display: flex; justify-content: flex-start; align-items: center; "
          >
            <el-row style="width: 100%">
              <el-col :span="2" flex="main:left cross:center"
                style="display: flex; justify-content: flex-start; align-items: center; "
              >
                <el-checkbox v-model="allCheck"></el-checkbox>
                <span class="all">全选</span></el-col
              >
              <el-col :span="11">商品</el-col>
              <el-col :span="3">单价</el-col>
              <el-col :span="3">数量</el-col>
              <el-col :span="3">小计</el-col>
              <el-col :span="2" style="  text-align:right">操作</el-col>
            </el-row>
          </div>
          <div
            v-for="(orderItem, index) in orderList"
            :key="orderItem.courseId"
          >
            <orderItem
              :allCheck="allCheck"
              :orderItem="orderItem"
              @delete="deleteCallBack($event, index)"
              @checkChange="checkChange($event, index)"
            ></orderItem>
          </div>

          <div class="order-commit" flex="main:justify cross:center"
            style="display: flex; justify-content: space-between; align-items: center; "
          >
            <p>
              已选择{{ checkedList.length }}件商品，商品金额￥{{totalAmout}}，应付
              <span class="font-primary fontWeight"> ￥{{discountAmout}} </span>
            </p>
            <button class="btn" @click="commit">结算订单</button>
          </div>
        </div>
      </div>
    </div>
   

    <el-pagination
      class="pagination"
      @current-change="getOrderList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    </div>


    
  </div>
</template>

<script lang="ts" >
import orderItem from "/@/components/order/orderItem.vue";

import router from '/@/router';

import { getCart, createOrder } from "/@/api/order";
export default {
  components: {
    orderItem,

  },

  data() {
    return {
      total: 0,
      pageSize: 50,
      checkedList: [],
      orderList: [],
      allCheck:false,
      payDlg:false
    };
  },
  computed:{
    discountAmout(){
      let amount  = 0;
      this.checkedList.map(checkItem => {
        this.orderList.map(order => {
        if(order.courseId ===checkItem ) {
            amount = amount+order.discountPrice
          }
        })
      })
      return amount.toFixed(2)
    },
    totalAmout(){
      let amount  = 0;
      this.checkedList.map(checkItem => {
        this.orderList.map(order => {
          if(order.courseId ===checkItem ) {
            amount = amount+order.price
          }
        })
      })
      return amount.toFixed(2)
    }
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    checkChange(checked, index) {
      let item = this.orderList[index];
      item.checked = checked;
      const checkIndex = this.checkedList.indexOf(item.courseId);
      if (checked) {
        this.checkedList.push(item.courseId);
      } else {
        this.checkedList.splice(checkIndex, 1);
      }
    },

    deleteCallBack(courseId,index) {
      this.orderList.splice(index, 1);
    },
    commit: function () {
      if(this.checkedList.length <= 0) {
        return this.$message({
            message: '请至少选择一项课程',
            type: 'warning'
          });
      }

      createOrder({ courseIds: this.checkedList }).then(res => { // 创建订单
        // this.$store.commit("user/SET_CART",res.cartTotal); // local storage 中的购物车商品数量
        router.push({ name: "checkOrder" ,query:{orderId:res.orderId}});
      })

    },
   
    getOrderList(page = 1, params = {}) {
      let offset = (page - 1) * this.pageSize;

      getCart({ // 调起接口获取购物车
        offset: offset,
        size: this.pageSize,
        ...params,
      })
      .then((res) => {
        let { courseInfos, total } = res;
        courseInfos.checked = false;
        this.orderList = courseInfos;
        this.total = total;
      })
      .catch((err) => {
        console.error(err);
      });
    },
  },

};
</script>

<style lang="scss" scoped>
.order-warp {
  position: relative;

  z-index: 2;
  margin: -170px 40px 0;
}
.checkBox-warp {
  padding: 20px;
  margin-top: 20px;
  font-size: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(219, 124, 65, 0.1);
}

.el-col {
  height: 100%;
  text-align: center;
  padding: 4px;
}
.all {
  font-size: 16px;
  margin-left: 6px;
  line-height: 32px;
}
.order-commit {
  margin:60px 0 40px 40px;
}
.btn {
  width: 180px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  color: #ffffff;
  background: #ff5f19;
  font-weight: bold;
  font-size: 24px;
}
</style>